<template>
	<view class="content">
		<!--  -->
		<view class="fabu" @click="goIndet">
			发布
		</view>
		<view class="text">
			<textarea value="商品的详细描述" placeholder=""  v-model="miaoshu"/>
		</view>

		<view class="container">
			<view class="imgs">
				<view @click.stop="DelImg(i)" class="imgs-btn1" v-for="(item,i) in imgs2">
					<!-- <button type="default" style="margin-top: 100rpx;" v-if="0">主图</button> -->
					<!-- <uni-icons type="closeempty" class="close" size="20"></uni-icons> -->
					<image :src="item" mode=""></image>
				</view>
				<view class="fabu1-img" @click="goImgs()">
					<image src="../../static/tian.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<!-- 地理位置 -->
		<view class="geography" @click="goLocation">
			<uni-icons type="location-filled" size="16"></uni-icons>
			{{dizhi}}
			<span v-show = 'flag'>发货地:点击获取位置</span>
		</view>
		<!-- 下方 -->
		<view class="classifier">
			<view class="classifier1" @click="goSorted">
				<view class="classifier1-left">
					<view class="classifier1-left1">
						<image src="../../static/addition/class1.png" mode=""></image>
					</view>
					<view class="classifier1-left2">
						所属分类
					</view>
					
				</view>
				<view class="classifier1-right3">
					{{chengshimingcheng1}}/{{chengshimingcheng3}}
				</view>
			</view>
			<view class="classifier2">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class2.png" mode=""></image>
					</view>
					<view class="classifier2-left2">
						商品价格/元：
					</view>
					
				</view>
				<view class="classifier2-right">
					<input type="number" placeholder="请输入价格" class="classifier2-right-input" v-model="jiage" /><span>￥</span>
				</view>
			</view>
			<!-- v-if="idto2 == 1" -->
			<view class="classifier2"  v-if="idto2 == 1">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class3.png" mode=""></image>
					</view><view class="classifier2-left2">手续费/金钻：</view></view>
				<view class="classifier2-right">
					<input type="number" placeholder="0.00" class="classifier2-right-input" v-model="shouxufei" /></view>
			</view>
			<view class="classifier2" v-if="idto2 == 1">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class4.png" mode=""></image>
					</view><view class="classifier2-left2">担保金/金钻：</view></view>
				<view class="classifier2-right">
					<input type="number" placeholder="0.00" class="classifier2-right-input" v-model="danbaojin" /></view>
			</view>
			<view class="classifier2" v-if="idto2 == 1">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class5.png" mode=""></image>
					</view><view class="classifier2-left2">支持返金钻：</view></view>
				<view class="classifier2-right2" v-model="fanjinzuan">
					<image src="../../static/addition/class8.png" mode=""></image>
					</view>
			</view>
			<view class="classifier2" v-if="idto2 == 1">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class6.png" mode=""></image>
					</view><view class="classifier2-left2">商品成本/元：</view></view>
				<view class="classifier2-right" v-model="jiage">
					<input type="number" placeholder="请输入" class="classifier2-right-input" v-model="chengben" /></view>
			</view>
			<view class="classifier2" v-if="idto2 == 1">
				<view class="classifier2-left">
					<view class="classifier2-left1">
						<image src="../../static/addition/class7.png" mode=""></image>
					</view><view class="classifier2-left2">返钻数量：</view></view>
				<view class="classifier2-right" v-model="jiage">
					<input type="number" placeholder="0.00" class="classifier2-right-input" v-model="fanzuanshuliang" /></view>
			</view>
		</view>
	</view>
</template>

<script>
	// 以下路径需根据项目实际情况填写
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				pages2:'0',
				idto2:'',//接收上一页id判断是什么类型0免费1付费2以物易物
				address: '',// 接收地址
				dizhi: '',
				flag:true,
				miaoshu:'',//商品描述
				imgs: [], //添加图片接收
				imgs2:'',//页面展示
				jiage:'',//价格
				chengshi:'',// 城市编码
				youzheng:'',//邮政编码
				chengshimingcheng:'',//城市名称
				chengshimingcheng0:'',//父类id
				chengshimingcheng1:'请选择分类',//父类名字
				chengshimingcheng2:'',//子类id
				chengshimingcheng3:'',//子类名字
				shouxufei:'',//手续费（付费寄售）
				danbaojin:'',//担保金(付费寄售)
				fanjinzuan:'0',//是否返金钻1是0否(付费寄售)
				chengben:'',//商品成本(付费寄售)
				fanzuanshuliang:'',//返钻数量(付费寄售)
			};
		},
		onLoad(options) {
		this.goRule()
			console.log(options.pages)
			this.idto2 = options.pages
			console.log(this.idto2)
			if(options.id!==''){
				this.chengshimingcheng0=options.id.split(',')[0]
				this.chengshimingcheng1=options.id.split(',')[1]
				this.chengshimingcheng2=options.id.split(',')[2]
				this.chengshimingcheng3=options.id.split(',')[3]
			}
			if(options.pages!==''){
				this.idto2 = options.pages
				try{
				uni.setStorageSync('pages', id);
				console.log('111111111111111')
				}catch(e){
				console.log('本地存储pages失败')
				};
				try{
				    var value = uni.getStorageSync('pages');
				    if(value){
				        console.log("const value = uni.getStorageSync('pages') 同步获取 = " + value)
						console.log(value,'本地存储拿取888')
				    }
				}catch(e){
				    console.log('调取本地存储pages失败')
				};
			console.log(value)
			}
			
			
			// var data2 = options
		    // this.addres = data2
		},
		methods: {
			//获取寄售规则
			goRule() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/getIdleWaresRule',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				  //    data: {
					 // orderId:that.orderId,//订单id
				  //    },
				     afterAjax: (res) => {
						 		console.log(res,'获取寄售规则')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: '获取寄售规则失败',
						 				icon: 'none'
						 			})
						 		}
						 		if (res.code == 200) {
						 			console.log('拿到获取寄售规则')
						 		}
				     }
				    })
			},
			goLocation() {
				let that = this
				// uni.chooseLocation({
				//     success: function (res) {
				// 		console.log('全部信息', res)
				//         console.log('位置名称：' + res.name);
				//         console.log('详细地址：' + res.address);
				// 		that.dizhi = res.name
				//         console.log('纬度：' + res.latitude);
				//         console.log('经度：' + res.longitude);
				// 		that.flag = !that.flag
				//     }
					
				// });
				uni.getLocation({
				    type: 'wgs84',
					geocode:true,
				    success: function (res) {
						console.log('全部信息', res.address)
						that.dizhi = res.address.street
						console.log(that.dizhi)
						that.chengshi = res.address.cityCode
						console.log(res.address.cityCode)
						that.chengshimingcheng = res.address.city
						console.log(res.address.city)
						that.youzheng = res.address.postalCode
						console.log(that.youzheng,'邮政编码')
				        // console.log('当前位置的经度：' + res.longitude);
				        // console.log('当前位置的纬度：' + res.latitude);
				    }
				});
				},
	
			goSorted() {
				uni.navigateTo({
					url: './cons-sorted?id='+this.pages2
				})
			},
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			goImgs() {
				var that = this
			uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
						count: 9,//默认选择1张图片
						sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
						success:  (res)=> {
							console.log(res,本地相册图片)
							that.imgs2 = res.tempFilePaths;
							pathToBase64(res.tempFilePaths).then(base64 => {
									that.imgs.push(base64)
									console.log(that.imgs)
								})
								.catch(error => {
									console.error(error)
								}
								)
							console.log('-------清晰清晰---------')
						}
					});
			},
			goIndet() {
				console.log(111,this.dizhi)
				var that = this
				console.log(222,that.dizhi)
				console.log(222,that.imgs)
				console.log(222,that.jiage)
				console.log(222,that.chengshi)
				console.log(222,that.chengshimingcheng)
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresSave',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						waresContent:that.miaoshu,//商品描述
						waresType:1,//寄售类型
						waresImgs:that.imgs,//图片
						waresPrice: that.jiage,//商品价格
						cityCode: '0531',//城市编码
						cityName: '济南市',//城市名称
						parentCategoryId: that.chengshimingcheng0,//	分类ID（父级）
						parentCategoryName: that.chengshimingcheng1,//分类名称（父级）
						categoryId: that.chengshimingcheng2, //分类ID（子级）
						categoryName: that.chengshimingcheng3,// 分类名称（子级）
					},
					afterAjax: (res) => {
						console.log(res, '寄售商品发布*****')
						uni.navigateTo({
							url:'consignment-details'
						})
					}
					
				})
			},
			DelImg(i) {
				console.log(i, '索引')
				var i = i
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						console.log(i)
						if (res.confirm) {
							this.imgs.splice(i, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;

		.text {
			margin: 28rpx 25rpx;
			font-size: 25rpx;
			color: #747474;
			height: 262rpx;
		}

		.fabu1-img {
			width: 100rpx;
			height: 100rpx;
			margin-top: 40rpx;
			margin-left: 18rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			image {
				max-width: 100%;
				max-height: 100%;
			}
		}
		.container {
			background-color: #f5f5f5;
			width: 750rpx;
		}

		.shangchuan {
			width: 150rpx;
			font-size: 28rpx;
			padding: 10rpx;
		}

		.imgs {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin: 25rpx;

			.imgs-btn1 {
				margin: 10rpx;
				width: 200rpx;
				height: 200rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;

				image {
					max-width: 100%;
					max-height: 100%;
				}

				.imgs-btn1-btn {
					background-color: #FCDA22;
					width: 141rpx;
					height: 45rpx;
					text-align: center;
					line-height: 45rpx;
					position: absolute;
					z-index: 999;
					font-size: 21rpx;
				}
			}

			.imgs-btn2 {
				margin: 48rpx 41rpx 38rpx 68rpx;

				button {
					border-radius: 36rpx;
					width: 141rpx;
					height: 61rpx;
					line-height: 61rpx;
					text-align: center;
					background-color: #FCDA22;
					font-size: 21rpx;
				}
			}
		}

		.close {
			position: absolute;
			right: 0;
			background-color: rgba(206, 206, 206, 0.4);
			color: #fff;
		}

		.geography {
			margin: 32rpx 25rpx;
			border-radius: 52rpx;
			background-color: #EEEEEE;
			color: #3a3a3a;
			text-align: center;
			padding: 4rpx 8rpx;
			width: 300rpx;
			height: 57rpx;
			line-height: 57rpx;
			font-size: 21rpx;
		}

		.classifier {
			margin-top: 45rpx;
			margin-top: 1rpx solid #f5f5f5;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.classifier1, .classifier2 {
				padding: 10.79rpx 25.36rpx;
				height: 105.07rpx;
				width: 750rpx;
				line-height: 105rpx;
				text-align: center;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.classifier1-left, .classifier2-left {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
				.classifier1-left1, .classifier2-left1 {
					width: 43rpx;
					height: 43rpx;
					margin-right: 14rpx;

					image {
						max-width: 100%;
						max-height: 100%;
						margin-right: 14rpx;
					}
				}
				.classifier1-left2, .classifier2-left2 {
					margin: 20rpx 0;
					line-height: 43rpx;
					font-size: 25rpx;
					font-weight: 600;
				}
			}
			// 右边
			.classifier1-right, .classifier2-right {
				font-size: 25rpx;
			}
			.classifier1-right3 {
				margin-right: 45.36rpx;
				font-size: 21rpx;
			}
			.classifier2-right {
				color: #eb3e3e;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.classifier2-right-input {
					font-size: 21rpx;
					margin-bottom: 40rpx;
					// margin-top: 40rpx;
					margin-right: 40rpx;
					width: 120rpx;
					
				}
			}
			.classifier2-right2 {
				color: #eb3e3e;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 74.27rpx;
				height: 48.91rpx;
				margin-right: 70rpx;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		
		}
		.fabu {
			width: 123rpx;
			height: 57rpx;
			border-radius: 28rpx;
			background-color: #ffe246;
			line-height: 57rpx;
			text-align: center;
			font-size: 25rpx;
			font-weight: 600;
			position: fixed;
			top: 25rpx;
			right: 25rpx;
			z-index: 999;
		}
	}
</style>
